<template>
  <el-scrollbar height="400px">
    <el-table :data="jobList" border>
      <el-table-column type="expand">
        <template #default="props">
          <el-descriptions :column="2" border style="width: 100%;" title="岗位详情">
            <template #extra>
            </template>
            <el-descriptions-item label="职位名称">{{ props.row.name }}</el-descriptions-item>
            <el-descriptions-item label="企业名称">{{ props.row.enterpriseName }}</el-descriptions-item>
            <el-descriptions-item label="创建日期">
              {{ props.row.createdDate.substring(0, 10) }}
            </el-descriptions-item>
            <el-descriptions-item label="更新日期">
              {{ props.row.updatedDate }}
            </el-descriptions-item>
            <el-descriptions-item label="职位类型">{{ props.row.jobTypeStr }}</el-descriptions-item>
            <el-descriptions-item label="教育背景要求">{{
                props.row.educationalRequirementsStr
              }}
            </el-descriptions-item>
            <el-descriptions-item label="工作地址" span="2">{{
                props.row.workAddress
              }}
            </el-descriptions-item>
            <el-descriptions-item v-if="props.row.faceTalkSalary" label="薪资">面议</el-descriptions-item>
            <el-descriptions-item v-else label="薪资">
              {{ props.row.minSalary }}{{ props.row.minSalaryUnit }}/{{ props.row.salaryTime }}
              -
              {{ props.row.maxSalary }}{{ props.row.maxSalaryUnit }}/{{ props.row.salaryTime }}
            </el-descriptions-item>
            <el-descriptions-item label="优先专业" span="2">
              {{ props.row.preferredMajors }}
            </el-descriptions-item>
            <el-descriptions-item label="任职要求" span="2">{{
                props.row.requirements
              }}
            </el-descriptions-item>
            <el-descriptions-item label="职位描述" span="2">{{
                props.row.description
              }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column label="职位名称" prop="name"></el-table-column>
      <el-table-column label="薪资" prop="salary">
        <template #default="scope">
          <span v-if="scope.row.faceTalkSalary">面议</span>
          <span v-else>
                        {{ scope.row.minSalary }}{{ scope.row.minSalaryUnit }} - {{
              scope.row.maxSalary
            }}{{ scope.row.maxSalaryUnit }}
                    </span>
        </template>
      </el-table-column>
      <el-table-column label="企业名称" prop="enterpriseName"></el-table-column>
      <el-table-column label="操作" prop="">
        <template #default="scope">
          <el-button @click="submitResume(scope.row.id)">投递</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-scrollbar>
  <el-row class="pageDiv">
    <el-pagination
        :page-size="pageSize"
        :pager-count="11"
        :total="count"
        background
        class="page"
        layout="prev, pager, next"
    />
  </el-row>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import type {JobInterface, ResponseInterface, ResumeAndJobInterface} from "@/model/type";
import {getCountAPI, getJobListAPI, submitResumeAPI} from "@/api/JobAPI";
import {getLatestResumeNormalInfoAPI} from "@/api/ResumeAPI";
import {ElMessage} from "element-plus";

let currentPage = ref<number>(1)
const pageSize: number = 10
let count = ref<number>(1)
const jobList: JobInterface[] = reactive([])
let resumeId = ref<string>("")

async function submitResume(jobId: string) {
  let submitObj: ResumeAndJobInterface = {
    resumeId: resumeId.value,
    jobId: jobId,
  }
  const r: ResponseInterface = await submitResumeAPI(submitObj, localStorage.getItem("token"))
  if (r.code == 200) {
    ElMessage.success("投递成功")
  }
}

onMounted(async () => {
  const r: ResponseInterface = await getCountAPI()
  if (r.code == 200) {
    count.value = r.data
  }

  const r2: ResponseInterface = await getJobListAPI(currentPage.value, pageSize)
  if (r2.code == 200) {
    jobList.push(...r2.data)
  }

  const r3: ResponseInterface = await getLatestResumeNormalInfoAPI(localStorage.getItem("token"))
  if (r3.code == 200) {
    resumeId.value = r3.data.id
  }

})
</script>
<style scoped>
.pageDiv {
  width: 100%;
}

.page {
  margin: 0 auto;
}

.card {
  margin-bottom: 10px;
  width: 100%
}

.enterprise-name {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 在交叉轴上居中对齐子元素 */
  height: 16px;
  line-height: 16px;
}

</style>